1 00:00:00,540 --> 00:00:03,100 Hello and welcome to this video. 2 00:00:03,150 --> 00:00:11,530 In this video we are going to be drawn in that time and the hands for the analogue clock. 3 00:00:12,000 --> 00:00:20,640 So this is what our producer looks like at the moment and this is the code we have so far. 4 00:00:20,640 --> 00:00:21,610 Got it. 5 00:00:21,810 --> 00:00:33,030 So what I'm going to do now I'm going to add a function that will be used to generate or create that 6 00:00:33,030 --> 00:00:35,100 time for the clock. 7 00:00:35,310 --> 00:00:44,880 So this will include adding some variables all in need to use the DATE TO GET the hour the minute and 8 00:00:44,880 --> 00:00:46,050 the second. 9 00:00:46,050 --> 00:00:52,390 So I've added this function here from like 50 to 1 to the 6 to 8. 10 00:00:52,500 --> 00:00:58,900 This is the function that will be responsible for drawing in the time. 11 00:00:58,920 --> 00:01:01,960 So here we've defined the function here. 12 00:01:02,160 --> 00:01:11,160 Core draw time and inside parentheses we are referencing this to prep parameters the context and the 13 00:01:11,160 --> 00:01:12,250 radius. 14 00:01:12,420 --> 00:01:15,530 Here we've caught some variable. 15 00:01:16,020 --> 00:01:24,630 So we're using the date to get our minutes and the second saw this year we've got variable quad now 16 00:01:24,630 --> 00:01:31,060 which will display a big current date variable hour which will give us. 17 00:01:31,070 --> 00:01:33,100 All we're doing now. 18 00:01:33,150 --> 00:01:36,810 Get ours were referenced in this variable now. 19 00:01:36,840 --> 00:01:38,310 But get in the hours. 20 00:01:38,340 --> 00:01:41,970 Here again we use in the variable is variable. 21 00:01:42,000 --> 00:01:47,800 Now to get the minutes to get the second so this block here. 22 00:01:48,000 --> 00:01:53,420 These are variables that will get the current time now. 23 00:01:53,670 --> 00:02:02,520 The hours the minutes the set and the rest of the block of code here. 24 00:02:02,520 --> 00:02:04,770 Basically we are going to use. 25 00:02:04,770 --> 00:02:15,570 We're going to calculate the angle of our hand and draw it day length which is going to be 50 percent 26 00:02:15,750 --> 00:02:22,000 of the radius and a wave which is going to be 7 percent of the rate. 27 00:02:22,230 --> 00:02:32,910 So the same technique is used for the minutes and the second so this block off code here calculates 28 00:02:32,970 --> 00:02:42,270 the angle of our hand and also draws it in length which is going to be 50 percent of radius and the 29 00:02:42,270 --> 00:02:53,250 width of 7 percent of radius So applying the same technique for the minutes and 4 seconds. 30 00:02:53,520 --> 00:03:00,810 So I have to include this function inside the drop block method or drop the lock function so I just 31 00:03:00,870 --> 00:03:13,290 copy that and go to where the drol clock function is and just include that so we got the draw clock 32 00:03:13,320 --> 00:03:21,990 function so I just come down here and add that so this is the function that will reference the other 33 00:03:21,990 --> 00:03:23,340 functions. 34 00:03:23,880 --> 00:03:33,510 Okay so the next function I am going to add on is going to be defunct and that will draw the tall hands 35 00:03:33,750 --> 00:03:35,270 for the. 36 00:03:35,590 --> 00:03:38,080 So now I had the function to draw the hand. 37 00:03:38,100 --> 00:03:41,410 If you notice in this function here or draw time. 38 00:03:41,550 --> 00:03:48,100 We already made reference to this function here so you can see here the draw hand here. 39 00:03:48,200 --> 00:03:54,060 Could draw a hand here and would draw a hand here so we've already reference this function so there's 40 00:03:54,060 --> 00:04:02,970 no need to add this function to the draw clock function because we are referencing it inside the draw 41 00:04:03,120 --> 00:04:10,680 time function so quickly just run true for the draw our hand is to in here inside with draw and function. 42 00:04:11,020 --> 00:04:20,200 This Panthers here in siby parentheses where the contacts who got the position the length and the width. 43 00:04:20,290 --> 00:04:25,170 So these are all parameters that are passed in to this draw. 44 00:04:25,170 --> 00:04:26,070 Hand function. 45 00:04:26,070 --> 00:04:33,050 So again we've got the big in Path which is our chawl start off the path. 46 00:04:33,300 --> 00:04:41,010 So this is clearly where the trial begins and then we've got the line with this represents the line 47 00:04:41,030 --> 00:04:50,460 on the with of the hand and we're set in that to the width of the line cap and was set in that the line 48 00:04:50,530 --> 00:04:59,970 cap property physically easy used to set or return the style of the end caps for. 49 00:05:00,090 --> 00:05:08,840 Like the value round and square make the lines slightly longer. 50 00:05:08,850 --> 00:05:12,440 So in this case we've used the value round. 51 00:05:13,350 --> 00:05:21,970 So here we've got the mould method basically represents how you want the hand to move. 52 00:05:21,980 --> 00:05:30,110 So the default value here will go 0 0 we a present position on the x and y coordinates. 53 00:05:30,240 --> 00:05:34,550 And here are the retained method or way passing in position. 54 00:05:34,980 --> 00:05:48,330 Okay and here on line 78 with the line to basically repeat those line to the line to metter pads a new 55 00:05:48,330 --> 00:06:00,400 point and creates a line to that point from the last specified point in big canvas. 56 00:06:00,690 --> 00:06:11,880 The key thing to know that this method does not draw the line so my method is actually used to draw 57 00:06:11,880 --> 00:06:14,610 the path on the compass. 58 00:06:15,150 --> 00:06:18,390 So we've got the moves to basically. 59 00:06:18,570 --> 00:06:23,520 This method represents how the hand of the clock moves. 60 00:06:23,690 --> 00:06:25,890 And we've got the rotate again. 61 00:06:25,920 --> 00:06:33,690 This is irresponsible in that inside the parent they see passed the perimeter of position so it will 62 00:06:33,690 --> 00:06:36,510 rotate based on the position. 63 00:06:36,900 --> 00:06:44,760 And here we've got the line to move already covered what the line is and then this drug. 64 00:06:44,760 --> 00:06:51,870 The stroke is actually this stroke metter actually draws the path on the compass for the alpha drawing 65 00:06:51,870 --> 00:06:58,620 of the line will be done and used in this truck metate a game we use in the Rotate method to do the 66 00:06:58,680 --> 00:07:00,410 positioning because we're past him. 67 00:07:00,410 --> 00:07:01,870 The position here. 68 00:07:01,880 --> 00:07:06,260 Is here we've set it to cross to position. 69 00:07:06,330 --> 00:07:07,190 So here we go. 70 00:07:07,200 --> 00:07:11,350 Negative position also in negative length. 71 00:07:11,520 --> 00:07:24,990 So we means it will call in the opposite direction so that is basically the functions that all create 72 00:07:25,230 --> 00:07:31,340 the time draw the time saw the hand for the clock. 73 00:07:31,340 --> 00:07:39,830 So I'm just going to save that file save all day and we can check in out in our inside our browser and 74 00:07:39,830 --> 00:07:49,650 just see excel and so you can see we've got our hand bottom the clock is not moving so we need to create 75 00:07:49,740 --> 00:07:56,930 a clock start method that would be use to start the clock so we've got everything in place. 76 00:07:56,940 --> 00:08:02,590 We've got the numbers with the hand we just need the clock to start. 77 00:08:03,050 --> 00:08:05,840 Now they are forced to start the clock. 78 00:08:06,150 --> 00:08:16,070 We need to haul the draw clock function at intervals so we need to set the intervals for the drop clock 79 00:08:16,080 --> 00:08:19,200 functions to run or to stop. 80 00:08:19,230 --> 00:08:26,650 So we are going to modify the draw clock function to start the clock. 81 00:08:26,670 --> 00:08:33,960 We need to modify where we're calling the clock from and also change sets the interval. 82 00:08:33,960 --> 00:08:43,770 So here on line 6 where we've got the draw clock we are going to change this block of code. 83 00:08:44,340 --> 00:08:50,630 So here I've changed the line 6 so I'm use call in the set interval method. 84 00:08:50,700 --> 00:08:57,930 So this is what would be responsible for starting the clock and we can see here the interval is 1000 85 00:08:57,960 --> 00:09:03,030 milliseconds which is equivalent to 1 second. 86 00:09:03,030 --> 00:09:10,600 So this basically will allow the clock to start every second the clock ticking. 87 00:09:10,620 --> 00:09:14,490 So that's what this this this this in mealie seconds. 88 00:09:14,550 --> 00:09:18,980 So that is how they set into all method works. 89 00:09:19,230 --> 00:09:28,230 So the drawer clock will be called for each one thouse on the second intervals. 90 00:09:28,800 --> 00:09:32,030 So as I said this change should. 91 00:09:32,070 --> 00:09:34,150 We should get the clock work in now. 92 00:09:34,170 --> 00:09:36,110 So let's go back to the clock. 93 00:09:36,450 --> 00:09:39,360 I'm just going to refresh. 94 00:09:39,630 --> 00:09:46,530 You can see the clock ticking which is referencing the current time on my computer. 95 00:09:46,530 --> 00:09:47,330 Excellent. 96 00:09:47,520 --> 00:09:53,040 So if you've got your clock work in many many congratulations if you got any issues. 97 00:09:53,250 --> 00:09:55,300 Just take a look at the code again. 98 00:09:55,320 --> 00:09:57,730 Or just send me a message. 99 00:09:57,890 --> 00:09:59,830 Be more than happy to see. 100 00:10:00,030 --> 00:10:03,490 So congratulations and take care.